<template>
  <div style="height:100vh;background:#fff">
    <span
      class="iconfont icon-left"
      style="position: absolute;left:10px;top:10px;z-index:9999;font-size:20px"
      @click="goUpperStory()"
    ></span>
    <div>
      <van-swipe>
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" style="width:100%;height:200px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <p style="text-align: center;color:#AC1202;margin:0">网站通知</p>
    </div>
    <div>
      <van-tabs background="#F0F0F2">
        <van-tab title="注册个人账户">
          <div>
            <div class="registerFrom">
              <div>
                <span>注册账号:</span>
                <input maxlength="11" v-model="userInfo.phone" type="text" placeholder="输入手机号码" />
              </div>
              <div>
                <span>手机验证:</span>
                <input
                  v-model="userInfo.phoneCode"
                  type="text"
                  style="width:30%"
                  placeholder="获取验证码"
                />
                <input
                  :disabled="enable"
                  type="button"
                  :value="verification_Info"
                  :style="{color:enable?'#eee':'#000'}"
                  @click="getCode()"
                  style="width:30%;background:#ccc;padding:1px;border-radius:5px;"
                />
              </div>
              <div>
                <span>密&ensp;码:</span>
                <input v-model="userInfo.password" type="password" placeholder="666" />
              </div>
              <div>
                <span>确认密码:</span>
                <input v-model="userInfo.rePassword" type="password" placeholder="666" />
              </div>
              <div>
                <span>邀约码:</span>
                <input v-model="userInfo.referralCode" type="text" placeholder />
              </div>
            </div>
            <div style="margin-left:30px">
              <span style="font-size:13px;letter-spacing: 1px;">同意注册协议</span>
              <van-checkbox
                style="display:inline-block;padding-left:10px;"
                icon-size="16"
                v-model="checked"
                checked-color="#000"
                shape="square"
              ></van-checkbox>
            </div>
            <div style="padding:10px">
              <van-button
                @click="register()"
                type="default"
                color="rgba(33,86,140)"
                style="width: 50%;height: 35px;line-height: 35px;"
              >同意并提交</van-button>
              <van-button
                type="default"
                color="rgba(0,210,255)"
                size="small"
                style="width: 50%;height: 35px;line-height: 35px;"
              >放弃并退出</van-button>
            </div>
          </div>
        </van-tab>
        <van-tab title="注册公共账户"></van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
// import $ from "jquery";
export default {
  data: () => ({
    checked: false,
    num: 300,
    enable: false,
    verification_Info: "获取验证码",
    images: [require("../assets/image/register.png")],
    userInfo: {
      phone: null,
      phoneCode: null,
      password: null,
      rePassword: null,
      referralCode: null
    }
  }),
  created() {
    if (this.$route.query.code) {
      this.userInfo.referralCode = this.$route.query.code;
    }
  },
  methods: {
    goUpperStory() {
      this.$router.go(-1);
    },
    getCode() {
      if (this.userInfo.phone) {
        let retu = this.phoneFun(this.userInfo.phone);
        if (retu) {
          let data = {
            phone: this.userInfo.phone,
            sendType: "con_smstype_register"
          };
          this.$axios
            .register(`ym/public/member-send-verifycode`, data)
            .then(msg => {
              if (msg.status === 200 && msg.data.code === 0) {
                sessionStorage.setItem("phoneCode", msg.data.data.codeTest);
                this.$Toast("验证码发送成功!");
                this.enable = true;
                this.countDown();
              } else if (
                msg.status === 200 &&
                msg.data.code === 1 &&
                msg.data.data.residueSecond > 0
              ) {
                this.enable = true;
                this.num = msg.data.data.residueSecond;
                this.countDown();
                this.$Toast("验证码还在有效期!");
              }
            });
        } else {
          this.$Toast("手机号格式不正确!");
          return false;
        }
      } else {
        this.$Toast("请输入手机号!");
      }
    },
    register() {
      let _frominfo = this.userInfo;
      console.log(_frominfo);
      if (_frominfo.phone) {
        if (_frominfo.password === _frominfo.rePassword) {
          if (_frominfo.phoneCode === sessionStorage.getItem("phoneCode")) {
            //console.log(_frominfo.referralCode);
            //console.log(_frominfo.referralCode.length);
            if (_frominfo.referralCode) {
              let data = {
                phone: _frominfo.phone,
                password: _frominfo.password,
                rePassword: _frominfo.rePassword,
                phoneCode: _frominfo.phoneCode,
                referralCode: _frominfo.referralCode
              };
              this.$axios
                .register(`ym/public/member-register`, data)
                .then(res => {
                  if (res.status === 200 && res.data.code === 0) {
                    this.$Toast("注册成功!");
                    this.$router.push("/login");
                  } else {
                    this.$Toast(res.data.msg);
                  }
                });
            } else {
              this.$Toast("推荐码不能为空！");
            }
          } else {
            this.$Toast("验证码不匹配，请重新输入！");
            this.userInfo.phoneCode = null;
            return false;
          }
        } else {
          this.$Toast("密码输入不一致!");
        }
      } else {
        //console.log("请输入手机号");
      }
    },
    //手机号正则验证
    phoneFun(phones) {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(phones)) {
        return false;
      } else {
        return true;
      }
    },
    countDown() {
      let temp = setTimeout(this.countDown, 1000);
      this.num = this.num - 1;
      this.verification_Info = this.num + "秒后再试";
      if (this.num === 0) {
        // this.verifivationCode = false;
        this.num = 300;
        this.enable = false;
        this.verification_Info = "获取验证码";
        clearTimeout(temp);
      }
    }
  }
};
</script>
<style lang="scss">
.registerFrom {
  div {
    border: 1px solid #000;
    height: 30px;
    line-height: 30px;
    width: 90%;
    margin: 14px auto;
    padding: 5px;
    border-radius: 5px;

    span {
      padding-left: 30px;
      display: inline-block;
      width: 24%;
    }

    input {
      background: #fff;
      width: 60%;
      border: none;
      overflow: hidden;
    }
  }
}

.fromSty {
  div {
    margin: 15px 15px 28px 15px;
  }
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #999;
  font-size: 14px;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #999;
  font-size: 14px;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #999;
  font-size: 14px;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #999;
  font-size: 14px;
}
</style>